<template>
  <div >
<!--      <DrawingArea @updateCoordinates="displayCoordinates" />-->
<!--      <div class="coordinates">{{ coordinates }}</div>-->
    sss
    <div>
      <LivePlayer :videoUrl="videoUrl" >
      </LivePlayer>
    </div>

  </div>
</template>

<script>
import DrawingArea from "@/views/video/DrawingArea.vue";
import LivePlayer from "@liveqing/liveplayer";
export default {
  name: "canvas-demo",
  components: {
    DrawingArea,
    LivePlayer

  },
  data() {
    return {
      coordinates: '',
      videoUrl: "ws://192.168.25.117:80/rtp/11000000001320000016.live.flv"
    };
  },
  methods: {
    displayCoordinates(coords) {
      this.coordinates = `Start: (${coords.startX}, ${coords.startY}), Current: (${coords.currentX}, ${coords.currentY})`;
    }
  }
}
</script>

<style scoped>
.canvas-container{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh;
  font-family: Arial, sans-serif;
}
.coordinates {
  margin-top: 20px;
  font-size: 16px;
}
</style>
